<template>
    <div class="ClassAdd">
        <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="书签分类" sub-title="添加" />
        <a-col :xs="labelCol.span" style="margin-top: 20px; margin-left: 20px">
            <a-form :model="ClassList" @submit.prevent="add">
                <a-row>
                    <a-col>
                        <a-form-item label="上级分类" :rules="[{ required: true }]" >
                            <a-tree-select
                                v-model:value="parentClass.cid"
                                style="width: 100%"
                                :tree-data="treeLocData"
                                placeholder="请选择分类层级"
                                tree-default-expand-all
                                :replaceFields="{ key: 'cid', value: 'cid' }"
                            ></a-tree-select>
                        </a-form-item>
                    </a-col>
                    <a-col>
                        <a-form-item label="分类名称" :rules="[{ required: true }]">
                            <a-input v-model:value="ClassList.title" />
                        </a-form-item>
                    </a-col>
                    <a-col>
                        <a-form-item>
                            <a-button type="primary" html-type="submit">创建书签分类</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-col>
    </div>
</template>

<script>
import { 
    warning, 
    success 
} from "@/antd";
import { mapGetters } from "vuex";

export default {
    name: "ClassAdd",
    data() {
        return {
            treeLocData: [],
            BookmarksClas: {},
            labelCol: {
                span: 6,
            },
            ClassList: {
                title: "",
                pid: 0,
            },
            parentClass: this.$route.query,
        };
    },
    computed: {
        ...mapGetters(["getClassData"])
    },
    methods: {
        editBookmarksCategory() {
            
            this.treeLocData = [{
                cid: 0,
                title: "顶级分类",
                pid: 0
            }, ...this.getClassData];
        },
        paramsQuery() {
            if (!this.parentClass) {
                return this.parentClass = {
                    cid: 0,
                    title: "顶级分类"
                }
            }
        },
        add() {
            let promise = new Promise((resolve) => {
                if (this.parentClass.cid) {
                    this.ClassList.pid = this.parentClass.cid;
                }
                resolve(this.ClassList);
            });

            promise.then((res) => {
                console.log(res);
                this.$store.dispatch("addClass", res)
                    .then(() => {
                        success("创建成功", 1, () => {
                            this.$router.push("ClassList");
                        });
                    })
                    .catch((error) => {
                        warning(error);
                    });
            });
        },
    },
    created() {
        this.$store.dispatch("getClass")
        .then(()=>{
            this.editBookmarksCategory()
        })
        .catch((error) => {
            warning(error);
        });
        this.paramsQuery()
    },
};
</script>

<style scoped></style>
